<template>
	<view class="container">
		<view class="blue_bg" />

		<view class="coupon_tab">
			<view v-for="(item,index) in coupon_list" :key="index" class="coupon_item">
				<view class="item_left">
					￥<text>{{item.price}}</text>
				</view>
				<view class="item_right">
					<view class="title">
						满{{item.limit}}元可用
					</view>
					<view class="center">
						仅限于{{item.address}}加油站使用
					</view>
					<view class="footer">
						{{item.date}}
					</view>
				</view>
				<view v-if="item.state === 1" class="btn_state">
					领取
				</view>
				<view v-else class="btn_state btn_state_active">
					已领取
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				coupon_list: [{
					price: 20,
					limit: 200,
					address: 'XX',
					date: '2020.04.23—2023.09.12',
					state: 1
				}, {
					price: 20,
					limit: 200,
					address: 'XX',
					date: '2020.04.23—2023.09.12',
					state: 0
				}, {
					price: 20,
					limit: 200,
					address: 'XX',
					date: '2020.04.23—2023.09.12',
					state: 0
				}]
			}
		},
		methods: {

		}
	}
</script>

<style>
	@import '@/static/images/ryx/all.css';

	.coupon_tab {
		width: 90vw;
		padding: 20rpx;
		margin-top: 30rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.coupon_item {
		height: 20vh;
		margin: 20rpx;
		background-image: url('@/static/images/ryx/asset/quan@2x.png');
		background-repeat: no-repeat;
		background-size: 100%;
		display: flex;
		flex-flow: row nowrap;
		position: relative;
	}

	.coupon_item .item_left {
		width: 30%;
		margin-top: 50rpx;
		color: #fff;
		font-size: 40rpx;
		text-align: center;
	}

	.coupon_item .item_left text {
		font-size: 80rpx;
		font-weight: bold;
	}

	.coupon_item .item_right {
		padding: 20rpx;
		display: flex;
		flex-flow: column;
	}

	.item_right .title {
		color: #ff7a40;
		font-size: 40rpx;
		font-weight: bold;
	}

	.item_right .center {
		color: #282624;
	}

	.item_right .footer {
		margin-top: 40rpx;
		color: #959291;
	}

	.coupon_item .btn_state {
		height: 50rpx;
		line-height: 50rpx;
		width: 120rpx;
		border-radius: 30rpx;
		text-align: center;
		background-color: #ff7a40;
		color: #fff;
		position: absolute;
		right: 20rpx;
		top: 40%;
	}

	.btn_state_active {
		background-color: #d9d9d9 !important;
	}
</style>